import React, { ReactElement, useContext, useMemo } from 'react';
import { View, Text, Image } from 'react-native';

import styles from './style';
import { Store } from '../../reducer';
import Button from '../../../../components/Button';
import { onPressContactTeacher, goPay } from '../../actions';
import { service, spuCart } from '../../../../constant/resource';
import { isIOS } from '../../../../constant';
import { APP_RED } from '../../../../constant/color';

export default (): ReactElement => {
  const { state } = useContext(Store);

  return useMemo(
    (): ReactElement => (
      <View style={styles.container}>
        <View style={styles.buttons}>
          <Button style={styles.button} onPress={onPressContactTeacher}>
            <Image source={service} style={styles.serviceIcon} />
            <Text style={styles.buttonDesc}>客服</Text>
          </Button>
          {/* <Button style={styles.button} onPress={(): void => {}}>
            <Image source={spuCart} style={styles.cartIcon} />
            <Text style={styles.buttonDesc}>选课单</Text>
            <View style={styles.loadCartNum}>
              <Text style={styles.cartNum}>2</Text>
            </View>
          </Button> */}
        </View>
        <View style={styles.operations}>
          {/* <Button
            style={styles.add}
            textStyle={styles.addDesc}
            text="加入选课单"
            onPress={(): void => {}}
          /> */}
          <Button
            style={[styles.buy, isIOS ? { backgroundColor: APP_RED } : {}]}
            textStyle={styles.buyDesc}
            text="立即购买"
            activity={isIOS}
            onPress={goPay}
          />
        </View>
      </View>
    ),
    []
  );
};
